<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<script type="text/javascript">
	function updateStorage() {
		$.getJSON('services/rest/system/storage/all', function(data) {
			$('#storage-list').empty();
			$.each(data.storage, function(i, item) {
				$('#storage-list').append(
						'<li class="ui-widget-content ui-corner-all rounded" id="storage-'
								+ item.id + '"><h3>'
								+ item.name
								+ '</h3></li>');
			})
		});
	}

	function saveStorage() {
		storage = {
			nfs : {
				mountpoint : $('#new-storage-mountpoint').val()
			}
		};
		$.ajax({
			type : 'POST',
			url : 'services/rest/system/storage/save',
			contentType : 'application/json',
			dataType : 'json',
			data : JSON.stringify(storage),
			success : function(data, status, xhr) {
				$("#new-storage-dialog").dialog('close');
				updateStorage();
			}
		})
	}
	
	$(document).ready(function() {
		$('#new-storage-dialog').dialog({
			autoOpen : false,
			modal : true
			}
		);
		$('#new-storage-type').accordion();
		$('#new-storage').button({
			text : false,
			icons : {
				primary : "ui-icon-plus"
			}
		});
		$('#new-storage').click(function() { $('#new-storage-dialog').dialog('open'); });
		
		$('#new-storage-save').button();
		$('#new-storage-save').click(saveStorage);
	
		$('#refresh-storage').button({
			text : false,
			icons : {
				primary : 'ui-icon-arrowrefresh-1-w'
			}
		});
		$('#refresh-storage').click(updateStorage);

		updateStorage();
	});
</script>

<div id="storage">
	<span id="storage-toolbar" class="toolbar ui-widget-header ui-corner-all">
		<button id="refresh-storage" class="button"></button>
		<button id="new-storage" class="button"></button>
		<button id="delete-storage" class="button"></button>
	</span>
	<ul id="hosts-list" class="selectable"></ul>
</div>

	<div id="new-storage-dialog" title="New storage">
		<input id="new-storage-mountpoint">
		<div id="new-storage-type">
			<h3>NFS</h3>
			<div id="new-storage-nfs">
			</div>
			<h3>gluster</h3>
			<div id="new-storage-gluster">
			</div>
			<h3>CIFS</h3>
			<div id="new-storage-cifs">
			</div>
			<h3>iScsi</h3>
			<div id="new-storage-iscsi">
			</div>
		</div>
		<button id="new-storage-save">save</button>
	</div>
